<template>
	<view>
		<!-- 导航栏 -->
		<NavBar title="预约"></NavBar>
		
		<!-- 疗程选择器（未曾选择疗程选项） -->
		<view class="unselected_treatment_selector" :style="{marginTop: navBarHeight+5+'px'}" v-if="!selectedTreatment">
			<picker class="unselected_treatment_picker"  mode="selector" :value="selectedTreatment" :range="treatmentList" @change="handleSelectedTreatmentChange">
				<view class="tip">请选择疗程</view>
				<image src="/static/book/b_tri.png" class="img"></Image>
			</picker> 
		</view>
		
		<!-- 疗程选择器（已有疗程选项） -->
		<view class="selected_treatment_selector" :style="{marginTop: navBarHeight+5+'px'}" v-if="selectedTreatment" >
			<picker class="select_treatment_picker" mode="selector" :range="treatmentList" @change="handleSelectedTreatmentChange">
				<img :src="selectedTreatmentInfo.thumb_url" class="img"/>
				<view class="info">
					<view class="name">{{selectedTreatmentInfo.name}}</view>
				    <view class="mins">时长：{{selectedTreatmentInfo.mins}}分钟</view>
				</view>
			</picker>
		</view>
		
		<!-- 预订人表单 -->
		<view class="profile">
			<view class="header">预订人</view>
			<view class="truename">
			    <view>姓名</view>
	            <input type="text" class="input" :value="trueName" @input="handleTrueNameInput"/>
			</view>
			<view class="phone">
			    <view>手机号</view>
			    <input type="number" class="input" :value="phone" @input="handlePhoneInput"/>
			</view>
			<view class="auth_code">
				<view>验证码</view>
				<input type="number" class="input" placeholder-class="placeholder" :value="authCode" @input="handleAuthCodeInput"/>
				<view v-if="availableSendStatus" class="send_code_btn" @click="sendAuthCode">
					获取验证码
				</view>
				
				<view v-if="!availableSendStatus" class="unsend_code_btn">
					{{count}}秒重获验证码
				</view>
			</view>
		</view>
		
		<!-- 门店选择器 -->
		<view class="store_picker_wrap">
			<picker class="store_picker" mode="multiSelector" :range="storeMultiArray" :value="storeMultiIndex" @columnchange="bindStoreColumnChange" @change="handleStoreChange">
				<view class="store_name_wrap">
				    <view class="store_name">
	                    {{selectedStore}}
				    </view>
				    <img src="../../static/book/b_tri.png" class="invertTriangle"/>
				</view>
				 <view class="address_wrap">
				    <img src="../../static/book/location.png" class="location"/>
				    <view class="address">{{selectedAddress}}</view>
				</view>
			</picker>
		</view>
		
		<!-- 日期选择器 -->
		<view class="dateSelector">
			 <view class="monthSelector">
				<view class="lastMonth" @click="lastMonth">
					<view class="last" :style="{borderRight: lastMonthBtnStatus ? '8px solid #c9aaa8' : '8px solid #c4c4c4'}" ></view>
				</view>
				
				<view class="selectedMonth">{{selectedMonth}}月</view>
				
				<view class="nextMonth" @click="nextMonth">
					<view class="next" :style="{borderLeft: nextMonthBtnStatus ? '8px solid #c9aaa8': '8px solid #c4c4c4'}"></view>
				</view>
			 </view>
			 
			 <view class="daySelector">
				 <view class="day" v-for="(item,index) in selectedMonthDayArr" :key="index" @click="handleDayBtn(item)">
					 <view class="top_info" :style="[item.topStyle]">
						 {{item.week}}
					 </view>
					 
					 <view class="bottom_info" :style="[item.bottomStyle]">
						 {{item.day}}
					 </view>
				 </view>
			 </view>
		</view>
		
		<!-- 时间选择器 -->
		<view class="timeSelector">
			<view class="am">
				<view class="head">
				    上午
				</view>
				<view class="times_wrap">
					<view class="dot" v-for="(item,key) in timingArr" :key="key" v-if="key<5" :style="[item.style]"  @click="handleTimingBtn(item.time)">
						{{item.time}}
					</view>
				</view>
			</view>
			
			<view class="am" style="{marginTop:'8px'}">
				<view class="head">
					下午
				</view>
				<view class="times_wrap">
					<view class="dot" v-for="(item,key) in timingArr" :key="key" v-if="key>=5" :style="[item.style]" @click="handleTimingBtn(item.time)">
					 	{{item.time}}
					</view>
				</view>
			</view>
		</view>
		
		<!-- 备注 -->
		<view class="remark_wrap">
			<view class="remark">
			    <textarea :value="remark" class="textarea" placeholder="请输入你的其他要求（如有）" placeholder-class="placeholder" @input="handleRemarkInput"></textarea>
			</view>
		</view>
		
		<!-- 提交按钮 -->
		<view class="submit_btn_wrap">
			<view class="submit_btn" @click="handleSubmitBtn">立即体验</view>
		</view>
		
		<!-- TabBar -->
		<tabBar></tabBar>
		
	</view>
</template>

<script>
	import dayjs from 'dayjs';
	import {setGlobalData, Request, getGlobalData,getMonthDay,weekNumToText,combineDate} from '@/util.js';
	import tabBar from "@/custom-tab-bar/index.vue";
	import NavBar from "@/components/NavBar.vue";
	const domain = getGlobalData('domain');
	const openid = uni.getStorageSync('openid');
	const navBarHeight = uni.getStorageSync('navBarHeight');
	const currentYear = dayjs().year();
	const currentMonth = dayjs().month() + 1;
	const currentDay = dayjs().date();
	console.log(currentMonth);
	export default {
		components:{
			NavBar,
			
		},
		onShow(){
			this.commitTabBarID(2);
			this.selectedTreatment = uni.getStorageSync('selectedTreatment');
			this.getTreatmentList();
			this.getTreatment(this.selectedTreatment);
			this.getUserInfo();
			this.getStoreListInfo();
			this.getWeekAndDay(this.selectedYear, this.selectedMonth, this.selectedDay);
			this.getTimingArr();
			
		},
		methods:{
			//处理提交按钮
			handleSubmitBtn(){
				//校验所选疗程是否为空
				if(!uni.getStorageSync('selectedTreatment')){ //校验所选疗程是否为空
					uni.showModal({
						content:"请选择疗程",
						showCancel:false,
					})
				}else if(!uni.getStorageSync('trueName')){ //校验真实姓名是否填写
					uni.showModal({
					    content:"请填写您的真实姓名",
			            showCancel:false,
					})
				}else if(!uni.getStorageSync('phone')){ //校验手机号码是否填写
					uni.showModal({
					    content:"请填写您的联系电话",
			            showCancel:false,
		            })
				}else if(!uni.getStorageSync('authCode')){ //校验验证码是否填写
					uni.showModal({
					    content:"请填写收到的验证码",
			            showCancel:false,
					})
				}else if(!uni.getStorageSync('selectedTime')){  //校验预约时间是否填写
					uni.showModal({
			            content:"请选择时间",
		                showCancel:false,
		            })
				}else{ //校验手机号码是否真实
					Request(domain+"/client/auth/checkCode",{phone:uni.getStorageSync('phone'), code:uni.getStorageSync('authCode')}).then((res)=>{
						let isTrue = res.data.data;
						if(isTrue){ //验证码为真
							let date = combineDate(this.selectedYear, this.selectedMonth, this.selectedDay);
							Request(domain+"/client/appointment/saveAppointment",{
								date:date,
								time: uni.getStorageSync('selectedTime'),
								treatment: uni.getStorageSync('selectedTreatment'),
								store: uni.getStorageSync("selectedStore"),
								openid: uni.getStorageSync("openid"),
		                        remark: uni.getStorageSync("remark")
							}).then((res)=>{
								if(res.data.code == 200){
									uni.removeStorageSync("authCode");
									
									this.authCode = "";
									
									uni.showModal({
										content:"预约成功",
										showCancel:false,
										success:function(e){
											if(e.confirm){
					                            uni.navigateTo({
							                        url:"/pages/confirm/index"
						                        })
											}
										}
									})
								}
							})
							
						}else{ //验证码为假
							uni.showModal({
							    content:"验证码不正确",
							    showCancel:false,
			                })
						}
					})
				}
			},
			//处理备注键入的逻辑
			handleRemarkInput(e){
				let value = e.detail.value;
				this.remark = value;
				uni.setStorageSync('remark',value);
			},
			getStatusByTime(time){
				for(let i in this.timingArr){
				    if(this.timingArr[i].time == time){
			            return this.timingArr[i].status;
		            }
				}
			},
			//处理时间的按钮
			handleTimingBtn(time){
				let timingArr = [];
				for(let i in this.timingArr){
					//判断是否是点击的时间
					if(time == this.timingArr[i].time){
						//判断是否状态为1
						if(this.timingArr[i].status == 1){
							timingArr[i] = {
								time: this.timingArr[i].time,
								status:this.timingArr[i].status,
								isSelected:true,
								style: {backgroundColor:'#E6C7C7',color:'#6A3E3E',border:'1px solid #63403F'}
							}
							uni.setStorageSync('selectedTime',timingArr[i].time);
						}else{
							timingArr[i] = this.timingArr[i];
						}
						
					}else{
						 //判断状态是否为1
						if(this.timingArr[i].status == 1){
							//判断是否为之前被点击的时间 
							if(this.timingArr[i].isSelected == true){
								//判断点击的时间是否是状态为0
								if(this.getStatusByTime(time) == 0){
									timingArr[i] = this.timingArr[i] 
								}else{
									timingArr[i] = {time:this.timingArr[i].time, status:this.timingArr[i].status}
								} 
								
							}else{
								timingArr[i] = this.timingArr[i];
							}
						}else{
							timingArr[i] = this.timingArr[i];
						}
					}
				}
				this.timingArr = timingArr;
			},
			//将小于10的日数或月份数前加0
			formatDate(num){
				if(num<10){
				    return "0"+num;
			    }else{
		            return num;
		        }
			},
			getTimingArr(){
				
				let fmt_selectedMonth =  this.formatDate(this.selectedMonth);
				let fmt_selectedDay = this.formatDate(this.selectedDay);
				let date = this.selectedYear + "/" + fmt_selectedMonth + "/" + fmt_selectedDay;
				Request(domain+"/client/availableBooking/bookingTiming",{date: date, store: this.selectedStore}).then((e)=>{
					let timingArr = [];
					let res = e.data.data;
					let k=0;
					for(let i in res){
						if(res[i] == 1){
							timingArr[k] = {time: i, status: res[i], style:{}};
						}else{
							timingArr[k] = {time: i, status: res[i], style:{backgroundColor: '#DEDEDE', color:'#fff'}}
						}
						k++;
					}
					this.timingArr = timingArr;
				})
				
			},
			//处理日期被点击的逻辑
			handleDayBtn(item){
				let selectedMonthDayArr = [];
				this.selectedMonthDayArr.forEach((res)=>{
					selectedMonthDayArr.push({
						day:res.day,
						week:res.week,				
						topStyle: res.day == item.day ? {color:'#6A3E3E'} : {},
						bottomStyle: res.day == item.day ? {color:'#fff', backgroundColor:'#c9aaa8'} : {} ,
					})
				});
				this.selectedMonthDayArr =selectedMonthDayArr;
				
				this.selectedDay = item.day;
				
				
			},
			//获取所选月份的所有日期与对应周数
			getWeekAndDay(selectedYear, selectedMonth, selectedDay){
			
				let selectedMonthDayArr = [];
				//如果是当年当月的话
				if(selectedYear == currentYear && selectedMonth == currentMonth){
					
					for(let i = currentDay; i <= getMonthDay(selectedYear, selectedMonth); i++){
						selectedMonthDayArr.push({
							day:i,
							week: weekNumToText(
									dayjs(selectedYear+"/"+selectedMonth+"/"+i).day()
								  ),
							topStyle: i == currentDay ? {color:'#6A3E3E'}: {},
							bottomStyle: i == currentDay ? {color:'#fff', backgroundColor:'#c9aaa8' } : {}
						});
					}
					
				}else{
					for(let i = 1;i <= getMonthDay(selectedYear, selectedMonth); i++){
						selectedMonthDayArr.push({
							day:i,
							week: weekNumToText(
									dayjs(selectedYear+"/"+selectedMonth+"/"+i).day()
								  ),
							topStyle: i == 1 ? {color:'#6A3E3E'}: {},
							bottomStyle: i == 1 ? {color:'#fff', backgroundColor:'#c9aaa8' } : {}	  
						})
					}
				}
				this.selectedMonthDayArr = selectedMonthDayArr;
			},
			//处理点击下个月按钮的逻辑
			nextMonth(){
				//判断是否有下个月
				if( this.monthCount >= this.maxNextMonth){
					this.nextMonthBtnStatus = false;
				}else{
					if(this.monthCount == (this.maxNextMonth-1)){
						this.nextMonthBtnStatus = false;
					}
					
					if(this.monthCount <= 1){
		                this.lastMonthBtnStatus = true;
		            }
					
					this.monthCount = this.monthCount+1;
					
					
					if(this.selectedMonth == 12){
						this.selectedYear = this.selectedYear+1;
						this.selectedMonth = 1;
					}else{
						this.selectedMonth = this.selectedMonth+1;
					}
				}
			},
			//处理点击上个月按钮的逻辑
			lastMonth(){
				if(this.monthCount > 0 ){
					this.monthCount = this.monthCount-1;
					
					if(this.selectedMonth == 1 ){
						this.selectedMonth = 12;
						this.selectedYear = this.selectedYear-1;
					}else{
						this.selectedMonth = this.selectedMonth-1;
					}
					
					this.nextMonthBtnStatus = true;
					
					if(this.monthCount == 0){
						this.lastMonthBtnStatus = false;
					}
					
				}else{
					this.lastMonthBtnStatus = false;
				}
			},
			//处理门店选择器某列改变的逻辑
			bindStoreColumnChange(e){
				if(e.detail.column == 0){
					this.storeMultiArray = [this.storeMultiArray[0], this.allStoreName[e.detail.value]];
				}
				
				let newMultiIndex = this.storeMultiIndex;
				newMultiIndex[e.detail.column] = e.detail.value;
				this.storeMultiIndex = newMultiIndex;
			},
			//处理门店选择器的值改变的逻辑
			handleStoreChange(e){
				let store= this.allStoreName[e.detail.value[0]][e.detail.value[1]];
				let address = this.allStoreAddress[e.detail.value[0]][e.detail.value[1]];
				this.selectedStore = store;
				this.selectedAddress = address;
				uni.setStorageSync("selectedStore",store);
			},
			//获取门店信息
			getStoreListInfo(){
				Request(domain + "/client/store/storeListForBookPage",{store:uni.getStorageSync("selectedStore")}).then((res)=>{
					if(!uni.getStorageSync('selectedStore')){
						uni.setStorageSync('selectedStore',res.data.data[0]);
					}
					return res.data.data;
				}).then((e1)=>{
					Request(domain+"/client/region/regionListForBookPage",{store:uni.getStorageSync("selectedStore")}).then((res)=>{
						let e2 = res.data.data;
						this.selectedStore = e1[0];
						let e3=[];
						e3.push(e2);
		                e3.push(e1);
						this.storeMultiArray = e3;
					})
				})
				this.storeMultiIndex = [0,0];
				Request(domain+"/client/store/allStoreListForBookPage",{store:uni.getStorageSync("selectedStore")}).then((res)=>{
					let e = res.data.data;
					this.allStoreAddress = e['storeAddress'];
					this.allStoreName = e['storeName'];
					this.selectedAddress = e['storeAddress'][0][0];
				})
			},
			//获取用户信息
			getUserInfo(e){
				Request(domain+"/client/user/userInfo",{openid:uni.getStorageSync('openid')}).then((res)=>{
				    let userInfo = res.data.data;
				    this.trueName = userInfo.true_name;
					this.phone = userInfo.phone;
				    uni.setStorageSync("trueName",userInfo.true_name);
			        uni.setStorageSync("phone",userInfo.phone);
				});
			},
			//发送验证码
			sendAuthCode(e){
				//校验手机号码格式是否正确
				var phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/;
				if( !phoneReg.test(this.phone) ){
				    uni.showModal({
			            title: '提示',
		                content:"请输入正确的手机号码",
						showCancel:false
				    })
				}else{
					this.availableSendStatus = false;
					 //请求接口发送验证码
					Request(domain+"/client/auth/sendCode",{phone:uni.getStorageSync('phone')});
					
					setTimeout(() => {
						this.availableSendStatus = true;
					    clearInterval(s);
					    this.count = 60;
					}, 60000);
					
					var s = setInterval(()=>{
						this.count = this.count-1;
					},1000)
					
				}
			},
			//处理验证码输入的逻辑
			handleAuthCodeInput(e){
				let authCode = e.detail.value;
				this.authCode = authCode;
				uni.setStorageSync('authCode',authCode);
			},
			//处理名字输入的逻辑
			handleTrueNameInput(e){
				 let trueName = e.detail.value;
				 this.trueName = trueName;
				 uni.setStorageSync("trueName",trueName);
				 Request(domain+"/client/user/updateTrueName",{trueName:trueName, openid:openid});
			},
			//处理手机号输入的逻辑
			handlePhoneInput(e){
				let phone = e.detail.value;
				if(phone.length <= 11){
			        Request(domain+"/client/user/updatePhone",{phone:phone,openid:openid});
			    }
				this.phone = phone;
				uni.setStorageSync('phone', phone)
			},
			//处理疗程选择器发生改变下的逻辑
			handleSelectedTreatmentChange(e){
				let selectedTreatment = this.treatmentList[e.detail.value];
				this.selectedTreatment = selectedTreatment;
				uni.setStorageSync('selectedTreatment',selectedTreatment);
				this.getTreatment(selectedTreatment);
			},
			//获取疗程的详细资料
			getTreatment(treatment){
				if(treatment){
					Request(domain+"/client/treatment/treatmentForDetailPage",{name:treatment}).then((res)=>{
					    let data = res.data.data;
						this.selectedTreatmentInfo.thumb_url = data.thumb_url;
						this.selectedTreatmentInfo.name = data.name;
						this.selectedTreatmentInfo.mins = data.mins;
					});
				}
			},
			//获取疗程列表
			getTreatmentList(){
				 Request(domain+"/client/treatment/treatmentNameListForBookPage",{treatment:uni.getStorageSync('selectedTreatment')}).then((res)=>{          
					this.treatmentList = res.data.data;
				});
			}
		},
		watch:{
			selectedYear(newVal,oldVal){
				this.getWeekAndDay(newVal, this.selectedMonth, this.selectedDay);
				this.getTimingArr();
				
			},
			selectedMonth(newVal, oldVal){
				
				this.getWeekAndDay(this.selectedYear, newVal, this.selectedDay);
				this.getTimingArr();
				uni.setStorageSync('selectedTime',"");
				if(this.selectedYear == currentYear && this.selectedMonth == currentMonth){
					this.selectedDay = currentDay;
				}else{
					this.selectedDay= 1;
				}
				
				this.selectedTime = "";
			},
			selectedDay(newVal,oldVal){
				this.getTimingArr();
				if(newVal != oldVal){
					this.selectedTime = ""
					uni.setStorageSync('selectedTime', "");
				}
			}
		},
		data() {
			return {
				navBarHeight:navBarHeight, //导航栏高度
				selectedTreatment: uni.getStorageSync('selectedTreatment'),  //选择的疗程
				selectedTreatmentInfo:{ //选择的疗程信息
					thumb_url:"", //疗程缩略图
					mins:"", //疗程时长
					name:"", //疗程名
				},
				phone:"", //用户手机号
				trueName:"", //用户真实姓名
				authCode:"", //用户输入的验证码
				availableSendStatus:true, //发送短信按钮状态
				count:60, //结束不可发送短信状态的秒数
				treatmentList:[], //疗程列表
				selectedStore: uni.getStorageSync('selectedStore'),
				storeMultiArray : [],
				storeMultiIndex : [0,0],
				allStoreName:[], //所有门店的名称
				allStoreAddress:[], //所有门店的地址
				selectedAddress:"" ,//所选门店的地址
				lastMonthBtnStatus:false, //上月按钮的状态
				nextMonthBtnStatus:true, //下月按钮的按钮
				selectedMonth: currentMonth, //选择的月份
				selectedYear: currentYear,  //选择的年份
				selectedDay: currentDay, //选择的天数
				monthCount:0, //预约未来多少个月份
				maxNextMonth:12 ,//最长可预约的月份
				selectedMonthDayArr:[], //所选月份的日期资料集合
				timingArr:[],//可选时间资料的集合
				remark:"",
			};
		},
	}
</script>

<!-- 页面page样式 -->
<style lang="less">
	@import '../../uni.less';
	page{
		background-color: @background_color;
		padding-bottom: 130rpx;
	}
</style>

<!-- 疗程选择器样式 -->
<style scoped lang="less">
	.unselected_treatment_selector{
	    width: 100%;
	    height: 100rpx;
	    // border:1rpx solid #000;
	
	    .unselected_treatment_picker{
	        width: 91%;
	        height: 100%;
	        margin: 0 auto;
	        background-color: #fff;
	        border:5rpx solid #caaaa9;
	        border-radius: 30rpx;
	        .tip{
	            text-align: center;
	            margin: 0 auto;
	            line-height: 100rpx;
	            height: 100%;
	            font-weight: 500;
	            font-size: 33rpx;
	            color:#D1A8A8;
	        }
	
	        .img{
	            width: 40rpx;
	            height: 40rpx;
	            position: relative;
	            top:-70rpx;
	            right: -600rpx;
	        }
	    }
	
	
	}
	
	.selected_treatment_selector{
	    z-index:100;
	    width: 100%;
	    height: 190rpx;
	    .select_treatment_picker{
	        width: 91%;
	        height: 100%;
	        background-color: #fff;
	        margin: 0 auto;
	        border-radius: 30rpx;
	        display: flex ;
	        flex-direction: row;
	        align-items: center;
	        position: relative;
	        .img{
	            width: 200rpx;
	            height: 150rpx;
	            margin-left: 25rpx;
	            margin-top: 10rpx;
	        }
	
	        .info{
	            position: absolute;
	            width:400rpx;
	            height:100%;
	            top:0rpx;
	            left:250rpx;
	            display: flex;
	            flex-direction: column;
	            .name{
	
	                font-size: 32rpx;
	                color:#6A3E3e;
	                font-weight: 450;      
	                margin-top: 45rpx;
	            }
	    
	            .mins{
	
	                font-size: 24rpx;
	                color: #c4c4c4;
	                margin-top: 15rpx;
	            }
	        }
	    }
	}
</style>

<!-- 预订人表单样式 -->
<style scoped lang="less">
	.profile{
	    width:91%;
	    height: 375rpx;
	    background-color: #fff;
	    margin: 18rpx auto;
	    border-radius: 30rpx;
	    display: flex;
	    flex-direction: column;
		.header{
	        width:92%;
	        color: #6A3E3e;
			margin-top: 30rpx;
		    margin-left: 25rpx;
		    font-size:33rpx;
	        padding-bottom: 20rpx;
	        border-bottom:1rpx solid rgb(243, 239, 239);
		}
		
	    .truename{
	        width:92%;
	        height: 90rpx;
	        margin-left: 25rpx;
	        border-bottom:1rpx solid rgb(243, 239, 239);
	        color: #D1A8A8;
	        line-height: 90rpx;
	        font-size:30rpx;
	        display: flex;
	        align-items: center;
	        justify-content: space-between;
	        .input{
	            width: 80%;
	            height: 100%;
	            text-align: right;
	            
	        }
	
	    }
		
	    .phone{
	        width:92%;
	        height: 90rpx;
	        font-size:30rpx;
	        line-height: 90rpx;
	        color: #D1A8A8;
	        margin: 0 auto;
	        margin-top: 5rpx;
	        margin-left: 25rpx;
	        display: flex;
	        align-items: center;
	        justify-content: space-between;
	        border-bottom:1rpx solid rgb(243, 239, 239);
	        .input{
	            width: 200rpx;
	            height: 100%;
	            text-align: right;
	            width:80%;
	        }
	    }
	
	    .auth_code{
	        width:92%;
	        height:90rpx;
	        font-size:30rpx;
	        line-height: 90rpx;
	        margin: 0 auto;
	        margin-left: 25rpx;
	        color: #D1A8A8;
	        display: flex;
	        align-items: center;
	        justify-content: space-between;
	        .input{
	            width:42%;
	            height:100%;
	            text-align: right;
	        }
	        .placeholder{
	            color:#ebebeb;
	        }
	        .send_code_btn{
	            height:70rpx;
	            line-height: 70rpx;
	            text-align: center;
	            width:30%;
	            background-color: #D1A8A8;
	            color: #fff;
	            border-radius: 20rpx;
	        }
	
	        .unsend_code_btn{
	            border-radius: 20rpx;
	            height:70rpx;
	            line-height: 70rpx;
	            text-align: center;
	            width: 40%;
	            background-color: #fff;
	            color: #D1A8A8;
	            border:1rpx solid #D1A8A8;
	        }
	    }	
			
		
	}
</style>

<!-- 门店选择器样式 -->
<style scoped lang="less">
	.store_picker_wrap{
	    width: 100%;
	    height: 200rpx;
	    margin-top: 25rpx;
	    .store_picker{
	        width: 91%;
	        height: 100%;
	        background-color: #fff;
	        margin: 0 auto;
	        border-radius: 30rpx;
	        border: 5rpx solid #caaaa9;
	        position: relative;
	        
	        .store_name_wrap{
	            width:100%;
	            height:80rpx;
	            display: flex;
	            flex-direction: row;
	            .store_name{
	                color:#6A3E3e;
	                font-weight: 500;
	                font-size:36rpx;
	                margin-left: 35rpx;
	                margin-top: 25rpx;
	            }
	
	            .invertTriangle{
	                width: 38rpx;
	                height: 38rpx;
	                margin-top: 32rpx;
	                margin-left: 15rpx;
	            }
	        }
	
	        .address_wrap{
	            width:100%;
	            height:110rpx;
	            position: absolute;
	            top:90rpx;
	            .location{
	                position: absolute;
	                top:14rpx;
	                width: 40rpx;
	                height: 40rpx;
	                top:25rpx;
	                left:35rpx;
	            }
	            .address{
	                position: absolute;
	                font-size: 28rpx;
	                width: 550rpx;
	                left: 100rpx;
	                color: #6A3E3E; 
	            }
	        }
	    }
	}
</style>

<!-- 日期选择器样式 -->
<style scoped lang="less">
	.dateSelector{
		margin-top: 20px;
	    width:100%;
	    height:200rpx;
	    border-bottom: 1rpx solid #caaaa9;
	    .monthSelector{
	        width: 100%;
	        height:80rpx;
	        display: flex;
	        justify-content: center;
	        align-items: center;
	
	        .lastMonth{
	            width: 140rpx;
	            height:100%;
	            display: flex;
	            align-items: center;
	            justify-content: center;
	            .last{
	                border-top:15rpx solid transparent;
	                border-bottom: 15rpx solid transparent;
	            }
	        }
	
	        .selectedMonth{
	            color: #6A3E3E;
	            font-weight: 500;
	            font-size: 40rpx;
	        }
	
	        .nextMonth{
	            width: 140rpx;
	            height: 100%;
	            display: flex;
	            align-items: center;
	            justify-content: center;
	            .next{
	                border-top: 15rpx solid transparent;
	                border-bottom: 15rpx solid transparent;
	            }
	        }
	
	
	    }
	
	    .daySelector{
	        width: 100%;
	        height:110rpx;
	        margin-top: 10rpx;
	        white-space: nowrap;
	        overflow-y: scroll;
	        .day{
	            height: 100%;
	            display: inline-block;
	            width: 88rpx;
	            .top_info{
	                color: #D1A8A8;
	                font-size: 24rpx;
	                text-align: center;
	            }
	            .bottom_info{
	                width:50rpx;
	                height: 50rpx;
	                border-radius: 50rpx;
	                text-align: center;
	                line-height: 50rpx;
	                margin:0 auto;
	                margin-top: 10rpx;
	                color: #D1A8A8;
	            }
	        }
	    }
	
	
	}
</style>

<style scoped lang="less">
	.timeSelector{
	    width:100%;
	    background-color: #fff;
	    height:850rpx;
	    padding-top:30rpx;
	    .am{
	        width: 93%;
	        margin: 0 auto;
	        .head{
	            color:#D1A8A8;
	        }
	        .times_wrap{
	            width:100%;
	            display: flex;
	            flex-wrap:wrap;
	            justify-content: flex-start;
	            flex-direction: row;
	            .dot{
	                margin: 21rpx 8rpx;
	                width:155rpx;
	                height: 60rpx;
	                font-size: 31rpx;
	                border-radius:7rpx;
	                color:#D1A8A8;
	                border:1rpx solid #FAF0EF;
	                background-color: #FAF0EF;
	                text-align: center;
	                line-height: 60rpx;
	            }
	        }
	    }
	}
</style>

<style scoped lang="less">
	.remark_wrap{
	    background-color: #fff;
	    height:230rpx;
	    padding-bottom: 50rpx;
	    .remark{
	        border:1rpx solid #D1A8A8;
	        width:91%;
	        height: 100%;
	        margin: 0 auto;
	        border-radius:30rpx;
	        background-color: #f8eeee;
	        color: #D1A8A8;
	        /deep/ .placeholder{
	            color:#D1A8A8;
	            font-size: 30rpx;
	           
	        }
	
	        .textarea{
	            width: 91%;
	            margin:0 auto;
	            height: 85%;
	            margin-top:20rpx;
	        }
	    }
	}
</style>

<style scoped lang="less">
	.submit_btn_wrap{
	    width:100%;
	    height:80rpx;
	    line-height: 80rpx;
	    background-color: #fff;
	    padding-bottom: 120rpx;
	    .submit_btn{
	        width:60%;
	        height:100%;
	        margin: 0 auto;
	        color:#fff;
	        text-align: center;
	        border-radius: 50rpx;
	        font-weight: 400;
	        background-color: #D1A8A8;
	    }
	}
</style>